<template>
	<view class="container">
		<view class="index-top">
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="f-center top-title"></view>
		</view>
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<swiper
				class="carousel"
				circular
				autoplay="true"
				duration="500"
				indicator-dots="true"
			>
				<swiper-item
					v-for="(item, index) in bannerList"
					:key="index"
					class="carousel-item"
				>
					<image :src="item.advertisingPath" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>
		<view class="member-info">
			<view class="box">
				<view style="color: #bb5b44">{{ userInfo.isMember }}</view>
				<view class="desc" style="color: #333333">{{ userInfo.userName }}</view>
			</view>
			<view class="box">
				<view>0</view>
				<view class="desc">积分</view>
			</view>
			<view class="box">
				<view>0</view>
				<view class="desc">优惠卷</view>
			</view>
		</view>
		<!-- <scroll-view scroll-y="true" class="main-box"> -->
		<view class="flex f-column main-box" style="position: unset">
			<view class="white-box flex f-column f-align f-justifyB">
				<view class="flex f-align w100">
					<!-- <view class="f-center flex1 f-column order-box" @click="scanCode">
							<text class="font40 gray333">扫码下单</text>
							<text class="font24 gray777 mt10">微信扫码</text>
							<text class="font24 gray777 mb20">立刻洗衣</text>
							<image src="../static/img/shouyesaomiao@2x.png"></image>
						</view> -->
					<!-- <view style="width: 1rpx;height: 200rpx;background-color: #A6A6A6;"></view> -->
					<view class="f-center flex1 f-column order-box" @click="lijixiadan">
						<text class="font40 gray333">立即下单</text>
						<text class="font24 gray777 mt10">智能存取</text>
						<text class="font24 gray777 mb20">随时送洗</text>
						<image src="../static/img/imediate_order.png"></image>
					</view>
					<view
						style="width: 1rpx; height: 200rpx; background-color: #a6a6a6"
					></view>

					<!-- 						<view class="f-center flex1 f-column order-box" @click="$api.toPage('./yuYueOrder?type=1', 1, this)">
 -->
					<view class="f-center flex1 f-column order-box" @click="yuyueMethod">
						<text class="font40 gray333">预约下单</text>
						<text class="font24 gray777 mt10">在线预约</text>
						<text class="font24 gray777 mb20">上门取送</text>
						<image src="../static/img/subscribe_order.png"></image>
					</view>
				</view>
				<view
					style="width: 100%; height: 1rpx; background-color: #a6a6a6"
				></view>
				<view class="flex f-align w100">
					<view
						class="take f-center flex1 f-column"
						@click="
							$api.toPage('./orderList?orderState=待取件&tabs=2', 1, this)
						"
					>
						<view class="flex f-align">
							<image
								src="../static/img/scaner.png"
								style="width: 46rpx; height: 46rpx"
							></image>
							<view class="flex f-column ml10">
								<view class="font40"
									>取衣[<text style="color: #f9553c">{{ orderCount }}</text
									>]</view
								>
							</view>
						</view>
					</view>
					<view
						style="width: 1rpx; height: 100%; background-color: #a6a6a6"
					></view>
					<view class="cabinet f-center flex1 f-column">
						<view
							class="flex f-align"
							@click="$api.toPage('./nearCabinet?type=1', 1, this)"
						>
							<image
								src="../static/img/cabinet.png"
								style="width: 46rpx; height: 46rpx"
							></image>
							<view class="flex f-column ml10">
								<text class="font40">柜体</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="flex f-align f-justifyB help-box" @click="$api.toPage('./orderList?orderState=待取件&tabs=2', 1, this)">
						<view class="flex f-align">
							<image src="../static/img/shouyuzizhuqujian@2x.png" style="width: 96rpx;height: 96rpx;"></image>
							<view class="flex f-column ml10">
								<text class="font40">自助取件</text>
								<text class="font24 gray777">您有 {{orderCount}} 个待取订单</text>
							</view>
						</view>
						<image src="../static/img/syzizhuyou@2x.png" style="width: 24rpx;height: 48rpx;"></image>
					</view> -->
			</view>
			<view
				class="flex f-column"
				style="background-color: #f5f5f5; padding: 0 32rpx 20rpx"
			>
				<image
					@click="$api.toPage('./cardList?tabs=1', 1, this)"
					src="https://xx.img.dz888.shop/7571665623792_.pic.jpg"
					mode="widthFix"
					style="width: 686rpx; margin-top: 30rpx"
				></image>
			</view>
			<!-- <view class="flex f-column" style="background-color: #F5F5F5;padding: 0 32rpx 20rpx;">
					<image @click="getTicket" v-if="userInfo.isGetDiscounts == '未领取' && ticketVal > 0" src="../static/img/new-person.png" mode="widthFix" style="width: 686rpx;margin-top: 30rpx;"></image>
					<view class="flex f-justifyB mt50">
						<view class="flex f-align gray-box" @click="$api.toPage('./myVIP', 1, this)">
							<image src="../static/img/index-vip.png" style="width: 50rpx;height: 50rpx;"></image>
							<view class="flex f-column font-box">
								<text class="font32 gray333">充值中心</text>
								<text class="gray777 font20">成为会员，享受优惠</text>
							</view>
						</view>
						<view class="flex f-align gray-box" @click="$refs.kefu.open()">
							<image src="../static/img/wdkefu@2x.png" style="width: 50rpx;height: 50rpx;"></image>
							<view class="flex f-column font-box">
								<text class="font32 gray333">联系客服</text>
								<text class="gray777 font20">在线时间9点-20点</text>
							</view>
						</view>
					</view>
					<view class="bottom-box flex f-align f-justifyB">
						<view class="flex f-align">
							<image src="../static/img/hand.png"></image>
							<text class="font20 gray333 ml10">手工洗护</text>
						</view>
						<view class="line1"></view>
						<view class="flex f-align">
							<image src="../static/img/jiankong.png"></image>
							<text class="font20 gray333 ml10">全程监控</text>
						</view>
						<view class="line1"></view>
						<view class="flex f-align">
							<image src="../static/img/line.png"></image>
							<text class="font20 gray333 ml10">工序严格</text>
						</view>
						<view class="line1"></view>
						<view class="flex f-align">
							<image src="../static/img/system.png"></image>
							<text class="font20 gray333 ml10">洗坏赔付</text>
						</view>
					</view>
				</view> -->
		</view>
		<!-- </scroll-view> -->
		<view class="my-push">
			<view class="title">我的推荐</view>
			<view class="push-list">
				<view
					class="item"
					v-for="(item, index) in goodsRecommendList"
					:key="index"
					@click="tuijianmethod(item)"
				>
					<view class="flex f-justifyB wrap">
						<image :src="item.goodsUrl" class="item-img"></image>
						<view style="width: 100%" class="text-overflow font26 gray333">{{
							item.goodsName
						}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 授权登录 -->
		<auth ref="auth" @getList="getList"></auth>
		<!-- 公众号 -->
		<view
			style="position: fixed; bottom: 320rpx; right: 20rpx; color: #ffffff"
			@click="$api.toPage('./officialAccount', 0, this)"
		>
			<view
				style="
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background: linear-gradient(#50d5b9, #33c3c3);
					width: 100rpx;
					height: 100rpx;
				"
			>
				<view
					style="
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					"
				>
					<image
						src="../static/img/gongzhonghao.png"
						style="width: 50rpx; height: 50rpx"
					></image>
					<text style="font-size: 25rpx">公众号</text>
				</view>
			</view>
		</view>
		<!-- 微信客服 -->
		<view
			style="position: fixed; bottom: 200rpx; right: 20rpx; color: #ffffff"
			@click="$refs.kefu.open()"
		>
			<view
				style="
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background: linear-gradient(#50d5b9, #33c3c3);
					width: 100rpx;
					height: 100rpx;
				"
			>
				<view
					style="
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					"
				>
					<image
						src="../static/img/kefu.png"
						style="width: 50rpx; height: 50rpx"
					></image>
					<text style="font-size: 25rpx">客服</text>
				</view>
			</view>
		</view>
		<!-- 客服电话 -->
		<kefu ref="kefu"></kefu>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import auth from '../components/auth.vue'
import kefu from '../components/kefu.vue'
export default {
	data() {
		return {
			statusBarHeight: getApp().globalData.statusBarHeight,
			bannerList: [],
			orderCount: 0,
			ticketVal: 0, // 是否设置有体验券
			goodsRecommendList: []
		}
	},
	components: {
		auth,
		kefu
	},
	onLoad(option) {
		// getApp().globalData.gzbh = 'XL06280042'

		if (option.scene) {
			getApp().globalData.gzbh = option.scene
		}
	},
	onShow() {
		console.log('userInfo', this.userInfo)
		this.getBanner()
		if (this.hasLogin) {
			this.getOrderList()
			this.getTicketInfo()
			this.getCartList()
		}
		this.getGoodsRecommendList()
	},
	onHide() {
		this.$refs.auth.close()
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	onShareAppMessage(e) {},
	onShareTimeline(e) {},
	methods: {
		tuijianmethod(item) {
			uni.setStorageSync('lijiyuyue', '1')
			this.$api.toPage('./productDetail?id=' + item.id, 1, this)
		},
		lijixiadan() {
			uni.setStorageSync('lijiyuyue', '1')
			// this.$api.toPage('./yuYueOrder?type=1', 1, this)
			uni.switchTab({
				url: '/pages/kind'
			})
		},
		yuyueMethod() {
			// uni.setStorageSync("lijiyuyue","2");
			// uni.switchTab({
			// 	url: '/pages/kind'
			// })

			this.$api.toPage('../delivery_pages/newKind?ddd=11')
		},
		...mapMutations(['login']),
		getCartList() {
			this.$http
				.ajax({
					url: '/ShoppingTrolley/list',
					params: {
						openId: uni.getStorageSync('openId')
					}
				})
				.then((res) => {
					if (res.code == 0 && res.count > 0) {
						let cartNum = res.data.reduce((a, b) => {
							return a + b.goodsNumber
						}, 0)
						uni.setStorageSync('cartNum', cartNum)
						uni.setTabBarBadge({
							index: 2,
							text: JSON.stringify(cartNum)
						})
					} else {
						uni.setStorageSync('cartNum', 0)
						uni.removeTabBarBadge({
							index: 2
						})
					}
				})
		},
		getList() {
			this.getOrderList()
			this.getTicketInfo()
		},
		getTicketInfo() {
			if (this.userInfo.isGetDiscounts == '未领取') {
				this.$http
					.ajax({
						url: '/CouponsSetUp/list',
						params: {}
					})
					.then((res) => {
						if (res.code == 200 && res.data.length > 0) {
							this.ticketVal = res.data[0].couponsMoney
							uni.showModal({
								title: '提示',
								content: '您有新人优惠券尚未领取！',
								cancelText: '先看看',
								confirmText: '去领取',
								success: (res) => {
									if (res.confirm) {
										this.$api.toPage('./cardList?tabs=1')
									}
								}
							})
						}
					})
			}
		},
		scanCode() {
			if (!this.hasLogin) {
				this.$refs.auth.open()
				return
			}
			uni.scanCode({
				onlyFromCamera: true,
				success: (res) => {
					if (res.result.length == 10) {
						uni.showLoading({
							title: '正在检测是否有空余箱门...'
						})
						this.$http
							.ajax({
								url: '/Box/selectGzbhStatus',
								params: {
									gzbh: res.result,
									number: 1
								}
							})
							.then((data) => {
								console.log('开始计算')
								console.log(data)
								uni.hideLoading()
								if (data.code == 200) {
									uni.setStorageSync('flag', '扫码下单')
									getApp().globalData.gzbh = res.result
									uni.switchTab({
										url: '/pages/kind'
									})
								} else {
									this.$api.msg(data.msg)
								}
							})
					} else {
						this.$api.msg('非平台二维码')
					}
				}
			})
		},

		// 获取首页轮播
		getBanner() {
			this.$http
				.ajax({
					url: '/Advertising/list',
					params: {
						type: '小程序',
						appId: uni.getAccountInfoSync().miniProgram.appId
					},
					isOP: 0
				})
				.then((res) => {
					console.log('轮播图', res)
					if (res.code == 0 && res.data.length) {
						this.bannerList = res.data
					}
				})
		},
		getOrderList() {
			this.$http
				.ajax({
					url: '/Order/list',
					params: {
						userId: uni.getStorageSync('userInfo').id,
						orderState: '待取件',
						page: 1,
						limit: 9999
					}
				})
				.then((res) => {
					if (res.code == 0 && res.count) {
						this.orderCount = res.count
					}
				})
		},
		getGoodsRecommendList() {
			this.$http
				.ajax({
					url: '/Goods/list',
					params: {
						userId: uni.getStorageSync('userInfo').id,
						isRecommend: 1,
						page: 1,
						limit: 9999
					}
				})
				.then((res) => {
					if (res.code == 0 && res.data) {
						this.goodsRecommendList = res.data
					}
				})
		}
	}
}
</script>

<style scoped lang="scss">
.member-info {
	display: flex;
	justify-content: space-around;
	padding: 20rpx;
	color: #333333;
	.box {
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		.desc {
			margin-top: 10rpx;
			color: #878988;
			max-width: 200rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
.shortcuts {
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding: 20rpx;
}
.my-push {
	padding: 32rpx 32rpx 120rpx 32rpx;
	.title {
		font-size: 32rpx;
		font-weight: bold;
	}
	.push-list {
		.item {
			width: 330rpx;
			border-radius: 12rpx;
			margin-top: 20rpx;
			padding: 15rpx 15rpx;
			// display: flex;
			// flex-direction: column;
			// align-items: center;
			display: inline-block;

			.item-img {
				border-radius: 12rpx;
				width: 330rpx;
				height: 330rpx;
				margin: 10rpx 0;
			}
		}
	}
}
.container {
	padding: 0;
	position: relative;

	.font20 {
		font-size: 20rpx;
		line-height: 20rpx;
	}

	.index-top {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;

		.top-title {
			height: 88rpx;
			padding: 0 20rpx;
		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		height: 600rpx;
		background-color: #e0e0e0;

		.carousel {
			width: 100%;
			height: 100%;

			.carousel-item {
				width: 100%;
				height: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 0rpx 0rpx 60rpx 60rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.main-box {
		position: absolute;
		top: 520rpx;
		left: 0;
		z-index: 99;
		width: 750rpx;

		.white-box {
			width: 686rpx;
			height: 480rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 6rpx 20rpx rgba(24, 70, 157, 0.18);
			border-radius: 12rpx;
			padding: 32rpx;
			margin-left: 32rpx;

			.order-box {
				height: 300rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.help-box {
			padding: 20rpx 50rpx;
			width: 100%;
		}

		.gray-box {
			width: 320rpx;
			height: 120rpx;
			background: #e6e6e6;
			border-radius: 6rpx;
			padding-left: 26rpx;

			.font-box {
				border-left: 1rpx solid #333333;
				padding-left: 24rpx;
				margin-left: 20rpx;
			}
		}

		.kefu-btn {
			margin: 0;
			padding-right: 0;
			display: flex;
			align-items: center;
			text-align: left;
		}

		.kefu-btn::after {
			border: none;
		}

		.bottom-box {
			width: 100%;
			padding: 15rpx 35rpx;
			margin-top: 50rpx;

			image {
				width: 18rpx;
				height: 20rpx;
			}

			.line1 {
				width: 0rpx;
				height: 20rpx;
				border-left: 1rpx solid #777777;
				margin: 0 30rpx;
			}
		}
	}

	::v-deep .uni-popup__wrapper-box {
		padding-bottom: 0;
	}
}

.index-bottom {
	width: 750rpx;
	background: #eeeeee;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
	padding-top: 20rpx;

	.box-t {
		width: 710rpx;
		height: 160rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(0, 0, 0, 0.16);
		padding: 0 120rpx;
	}

	.box-m {
		width: 710rpx;
		height: 180rpx;
		background: #deeeff;
		border-radius: 20rpx;
		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(48, 99, 217, 0.25);
		padding: 0 40rpx;
		margin-top: 20rpx;

		.btn {
			width: 200rpx;
			height: 60rpx;
			background: #3063d9;
			border-radius: 30rpx;
		}
	}

	.box-b {
		width: 750rpx;
		height: 168rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 0 44rpx;
		margin-top: 20rpx;

		.btn {
			width: 410rpx;
			height: 100rpx;
			background: #3063d9;
			border-radius: 20rpx;
		}
	}
}

/* 分类 */
.cate-section {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 10rpx;

	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 20rpx 20rpx 0;
	}

	image {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
		border-radius: 50%;
	}
}
</style>
